<!DOCTYPE html>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <body>
    <div layout:fragment="full-post">
      <header class="desktop-only">
        <div th:each="category : ${categories}" th:class="${@uih.blogClass(activeCategory?:'',category.displayName) + ' content--title'}">
          <div th:text="${category.displayName}">Engineering</div>
        </div>
      </header>
      <header sec:authorize="fullyAuthenticated">
        <span>[<a id="edit" th:href="@{/admin/blog/{id}-{slug}/edit(id=${post.id},slug=${slug})}">Edit</a>]</span>
      </header>
      <div class="blog--container">
        <header>
        <h1 class="blog--title" th:text="*{title}">Blog post</h1>
        <div class="meta-data--container">
          <div class="meta-data--item desktop-only">
            <div th:class="${'meta-data--icon icon blog-icon '+ #strings.toLowerCase(post.category).replace(' ','-')}"></div>
            <a class='category' th:text="${post.category}">Category</a>
          </div>
          <div class="meta-data--item">
            <img class="meta-data--icon" th:src="@{${post.author.avatarUrl} + '?s=20&amp;d=mm'}" />
            <a class="author" rel="author" th:text="${post.author.name}" th:href="@{'/team/'+${post.author.username}}" th:unless="${post.author.hidden}">Author</a>
                <span class='author' th:text="${post.author.name}" th:if="${post.author.hidden}">Author</span>
          </div>
          <div class="meta-data--item">
            <div class="meta-data--icon icon blog-icon calendar"></div>
            <time class='date' pubdate th:datetime="${post.publishAt}" th:text='${post.formattedPublishDate}'>June 18, 2013</time>
          </div>
          <div class="meta-data--item">
            <div class="meta-data--icon icon blog-icon comments"></div>
            <a class='comments' th:attr="data-disqus-identifier=${post.id}" th:href="@{${post.path} + '#disqus_thread'}"/>
          </div>
        </div>
        </header>
        <div class="blog--post" th:utext="*{renderedContent}">Blog content</div>
    </div>
    <section id="disqus_thread"></section>
    <script type="text/javascript" th:inline="javascript">
      var disqus_shortname = /*[[${disqusShortname}]]*/ 'no_shortname';
      var disqus_identifier = /*[[${post.id}]]*/ 'no_id';

      (function(disqus_shortname, document) {
        injectScript('//' + disqus_shortname + '.disqus.com/embed.js');
        injectScript('//' + disqus_shortname + '.disqus.com/count.js');

        function injectScript(url) {
          var s = document.createElement('script');
          s.async = true;
          s.src = url;
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);
        }

      }(disqus_shortname, document));
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    <div class="mobile-only">
      <p><a th:href="@{/blog}">
        <i class="icon-chevron-left"></i>
        Back
      </a></p>
    </div>
  </div>
  </body>
</html>

